<!-- 数字输入框 -->
<template>
	<view class="input-number">
		<view class="_button add iconfont icon-minus-circle" :class="{'_disabled': number === min }" @click="sub"></view>
		<input :value="number" @input="input" type="number"/>
		<view class="_button sub iconfont icon-add-circle" :class="{'_disabled': number === max }" @click="add"></view>
	</view>
</template>

<script>
	export default {
		props: {
			// 值
			value: {
				type: Number,
				default: 5
			},
			// 步长
			step: {
				type: Number,
				default: 1
			},
			// 最大值
			max: {
				type: Number,
				default: 100
			},
			// 最小值
			min: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				number: this.value
			}
		},
		methods: {
			// 值改变
			input(e) {
				const intVal = parseInt(e.detail.value)
				this.$emit('change', intVal)
			},
			// 加
			add() {
				if (this.number < this.max) {
					this.$emit('change', this.number + this.step)
				}
			},
			// 减
			sub() {
				if (this.number > this.min) {
					this.$emit('change', this.number - this.step)
				}
			}
		},
		watch: {
			value(val) {
				this.number = val
			}
		}
	}
</script>

<style scoped>
	.input-number {
		display: flex;
		align-items: center;
	}

	input {
		width: 80rpx;
		text-align: center;
	}

	._button {
		font-size: 28px;
		color: #007AFF;
	}

	._disabled {
		color: #ececec;
	}
</style>
